{% from 'macros/icon.njk' import icon with context %}

<top-nav role="banner" class="display-block hairline-bottom" data-side-nav-inert>
  <a href="#main-content" class="color-primary visually-hidden skip-link">{{ 'i18n.common.skip_to_content' | i18n(locale) }}</a>

  <nav class="align-center display-grid" aria-label="{{ 'i18n.common.chrome_developers' | i18n(locale) }}" role="navigation">
    {# Hamburger button #}
    <button class="dcc-hamburger top-nav__hamburger button display-flex lg:display-none align-center justify-content-center width-700 height-700" aria-label="{{ 'i18n.common.menu' | i18n(locale) }}">
      {{ icon('hamburger', {hidden: true}) }}
    </button>

    {# Logo #}
    {# This is referenced by the sidebar in 'navigation-rail.njk', don't change these IDs or SVGs
       without also updating there #}
    <div class="top-nav__logo display-flex justify-content-start">
      <a class="display-inline-flex" href="/" aria-label="developer.chrome.com">
        {{ icon('devsite-logo', {id: 'devsiteChromeLogo', hidden: true}) }}
      </a>
    </div>

    {# Search #}
    <search-box
      class="display-grid align-center"
      locale="{{locale}}"
      role="search"
      buttonLabel="{{ 'i18n.common.open_search' | i18n(locale) }}"
      docsLabel="{{ 'i18n.common.documentation' | i18n(locale) }}"
      articlesLabel="{{ 'i18n.common.articles' | i18n(locale) }}"
      blogLabel="{{ 'i18n.common.blog' | i18n(locale) }}"
      placeholder="{{'i18n.common.search_placeholder' | i18n(locale)}}"
    ></search-box>

    <nav class='dcc-top-menu'>
      <a href='/tags/case-study' class='no-visited'>{{ 'i18n.nav.side_nav.getInspired' | i18n(locale) }}</a>
      <a href='/docs' class='no-visited'>{{ 'i18n.nav.side_nav.docs' | i18n(locale) }}</a>
      <a href='/blog' class='no-visited'>{{ 'i18n.nav.side_nav.blog' | i18n(locale) }}</a>
      <a href='/articles' class='no-visited'>{{ 'i18n.nav.side_nav.articles' | i18n(locale) }}</a>
    </nav>
  </nav>
</top-nav>
